{% extends 'base.html' %}

{% block title %}{{ title }} - 请假审批系统{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h2>{{ title }}</h2>
        {% if show_apply_button %}
        <div style="float: right;">
            <a href="{% url 'apply_leave' %}" class="btn btn-primary">申请请假</a>
        </div>
        <div style="clear: both;"></div>
        {% endif %}
    </div>
    
    <!-- 筛选器 -->
    <form method="get" style="margin-bottom: 1.5rem; padding: 1rem; background: #f8f9fa; border-radius: 5px;">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: end;">
            <div class="form-group" style="margin-bottom: 0;">
                <label>状态</label>
                <select name="status">
                    <option value="">全部状态</option>
                    <option value="draft" {% if request.GET.status == 'draft' %}selected{% endif %}>草稿</option>
                    <option value="submitted" {% if request.GET.status == 'submitted' %}selected{% endif %}>已提交</option>
                    <option value="supervisor_approved" {% if request.GET.status == 'supervisor_approved' %}selected{% endif %}>主管已批准</option>
                    <option value="approved" {% if request.GET.status == 'approved' %}selected{% endif %}>已批准</option>
                    <option value="rejected" {% if request.GET.status == 'rejected' %}selected{% endif %}>已拒绝</option>
                    <option value="cancelled" {% if request.GET.status == 'cancelled' %}selected{% endif %}>已取消</option>
                </select>
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <label>请假类型</label>
                <select name="leave_type">
                    <option value="">全部类型</option>
                    {% for leave_type in leave_types %}
                    <option value="{{ leave_type.id }}" {% if request.GET.leave_type == leave_type.id|stringformat:"s" %}selected{% endif %}>
                        {{ leave_type.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <label>开始日期</label>
                <input type="date"  name="start_date" value="{{ form.start_date.value|date:'Y-m-d'|default:'' }}">
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <button type="submit" class="btn btn-primary">筛选</button>
                <a href="?" class="btn btn-secondary">重置</a>
            </div>
        </div>
    </form>
    
    {% if applications %}
    <table class="table">
        <thead>
            <tr>
                {% if show_applicant %}
                <th>申请人</th>
                {% endif %}
                <th>请假类型</th>
                <th>开始日期</th>
                <th>结束日期</th>
                <th>天数</th>
                <th>状态</th>
                <th>申请时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for application in applications %}
            <tr>
                {% if show_applicant %}
                <td>{{ application.applicant.get_full_name|default:application.applicant.username }}</td>
                {% endif %}
                <td>{{ application.leave_type.name }}</td>
                <td>{{ application.start_date }}</td>
                <td>{{ application.end_date }}</td>
                <td>{{ application.days_requested }}天</td>
                <td>
                    <span class="status-badge status-{{ application.status }}">
                        {{ application.get_status_display }}
                    </span>
                </td>
                <td>{{ application.created_at|date:"Y-m-d H:i" }}</td>
                <td>
                    <a href="{% url 'leave_detail' application.id %}" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">查看</a>
                    {% if application.can_be_edited and not show_applicant %}
                    <a href="{% url 'edit_leave' application.id %}" class="btn btn-primary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">编辑</a>
                    {% endif %}
                    {% if application.can_be_cancelled and not show_applicant %}
                    <a href="{% url 'cancel_leave' application.id %}" class="btn btn-danger" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;" onclick="return confirm('确定要取消这个申请吗？')">取消</a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    
    <!-- 分页 -->
    {% if is_paginated %}
    <div style="text-align: center; margin-top: 2rem;">
        <div style="display: inline-flex; gap: 0.5rem;">
            {% if page_obj.has_previous %}
            <a href="?page=1{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.leave_type %}&leave_type={{ request.GET.leave_type }}{% endif %}{% if request.GET.start_date %}&start_date={{ request.GET.start_date }}{% endif %}" class="btn btn-secondary">首页</a>
            <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.leave_type %}&leave_type={{ request.GET.leave_type }}{% endif %}{% if request.GET.start_date %}&start_date={{ request.GET.start_date }}{% endif %}" class="btn btn-secondary">上一页</a>
            {% endif %}
            
            <span style="padding: 0.75rem 1rem; background: #f8f9fa; border-radius: 5px;">
                第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页
            </span>
            
            {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.leave_type %}&leave_type={{ request.GET.leave_type }}{% endif %}{% if request.GET.start_date %}&start_date={{ request.GET.start_date }}{% endif %}" class="btn btn-secondary">下一页</a>
            <a href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.leave_type %}&leave_type={{ request.GET.leave_type }}{% endif %}{% if request.GET.start_date %}&start_date={{ request.GET.start_date }}{% endif %}" class="btn btn-secondary">末页</a>
            {% endif %}
        </div>
    </div>
    {% endif %}
    
    {% else %}
    <div style="text-align: center; padding: 3rem; color: #666;">
        <p>暂无申请记录</p>
        {% if show_apply_button %}
        <div style="margin-top: 1rem;">
            <a href="{% url 'apply_leave' %}" class="btn btn-primary">立即申请</a>
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}
